<script setup lang="ts">
import CommonConfig from "./CommonConfig.vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
import { getRandNodeId } from "@/utils/process";
const config = defineModel<FormDesignerComponents>("config");

const addCol = () => {
  config.value.props.columns.push({
    id: "GridCol" + getRandNodeId(),
    code: "GridCol" + getRandNodeId(),
    name: `栅格列${config.value.props.columns.length + 1}`,
    type: "GridCol",
    props: {
      isContainer: true,
      isFormItem: false,
      span: 12,
      offset: 0,
      push: 0,
      pull: 0,
      columns: []
    }
  });
};
</script>

<template>
  <CommonConfig v-model:config="config" />
  <el-form-item label="栅格间隔">
    <el-input v-model="config.props.gutter" type="number" placeholder="栅格间隔多少" />
  </el-form-item>
  <el-form-item label="当前栅格">
    <el-button type="primary" icon="circle-plus" @click="addCol">添加栅格</el-button>
  </el-form-item>
  <div v-for="(item, index) in config.props.columns" :key="index" class="cols-item">
    <div>{{ item.name }}</div>
    <div>宽度<el-input-number v-model="item.props.span" :min="0" :max="24" /></div>
    <div>
      <el-button icon="Delete" @click="config.props.columns.splice(index, 1)" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cols-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
